<template>
  <p>const temp0 = 1; --->>> temp0={{ temp0 }}</p>
  <input type="text" v-model="temp0" />{{ temp0 }}

  <p>const state0 = ref(temp0);</p>
  <input type="text" v-model="state0" />{{ state0 }}

  <p>const temp = { count: 1 }; --->>> temp={{ temp.count }}</p>
  <input type="text" v-model="temp.count" />{{ temp.count }}

  <p>
    响应式数值ref0： const state0 = ref(temp0);不会修改temp0，会刷新页面
    <button @click="add0">add {{ state0 }}</button>
    <input type="text" v-model="state0" />
  </p>
  <p>
    响应式对象ref1： const state1 =
    ref(temp.count);不会修改temp.count，会刷新页面
    <button @click="add1">Add {{ state1 }}</button>
    <input type="text" v-model="state1" />
  </p>
  <p>
    响应式对象toRef2：const state2 = toRef(temp,
    "count");会修改temp.count，但是不刷新页面。
    <button @click="add2">Add {{ state2 }}</button>
    <input type="text" v-model="state2" />
  </p>
  <p>
    let obj = { A: 0 }; 普通对象 obj.A--->>
    <br />
    <input type="text" v-model="obj.A" /> <input type="text" v-model="obj.A" />
    <br />
    let A2 = toRef(obj, "A"); 当 A2.value=3; 那么 obj.A也会等于3.
    v-model="A2"->>>但是不会触发页面刷新
    <br />
    A2.value--->>
    <input type="text" v-model="A2" />{{ A2 }}
    <br />
    let obj = { A: 0 } ; let A3 = toRefs(reactive(obj)); return { ...A3 }
    v-model="A"->>> 双向绑定 会触发页面刷新
    <br />
    <input type="text" v-model="A" />
  </p>
</template>
<script lang="ts">
// https://www.cnblogs.com/yingliyu/p/14267394.html
import { reactive, ref, toRef, toRefs } from "vue";
export default {
  setup() {
    const temp0 = 1;
    const state0 = ref(temp0); // ref()是对原数据的一个深拷贝，当其值改变时不会影响到原始值；

    const temp = { count: 1 };
    const state1 = ref(temp.count);

    const state2 = toRef(temp, "count"); //toRef()是对原数据的一个引用，当值改变时会影响到原始值；
    state2.value = 123123123123;
    console.log("temp.count-->>" + temp.count);

    const add0 = () => {
      state0.value++;
      console.log("temp0原始值：", temp0); //原始值：1
      console.log("响应式数据对象ref：", state0.value); //响应式数值ref：2
    };
    const add1 = () => {
      state1.value++;
      console.log("原始值：", temp); //原始值：1
      console.log("响应式数据对象ref：", state1.value); //响应式对象ref：2
    };

    const add2 = () => {
      state2.value++;
      console.log("原始值：", temp); // 原始值：2
      console.log("响应式数据对象toRef：", state2.value); //响应式对象toRef：2
    };

    let obj = { A: 0 }; //   obj.A 普通对象 这种情况会双向绑定A ，但是不刷新界面
    let A2 = toRef(obj, "A"); //   这种情况会双向绑定A ，但是不刷新界面
    A2.value = 1111;
    console.log(obj.A);

    let objB = { B: 0 }; //   obj.B 普通对象 这种情况会双向绑定B ，但是不刷新界面
    let B0 = toRefs(objB); //   这种情况会双向绑定B ，但是不刷新界面
    B0.B.value = 222;
    console.log("objB.B-->>" + objB.B);

    // let obj = reactive({ A: 0 });
    // let A2 = toRef(obj, "A");  这种情况会双向绑定A，同时刷新界面

    let A3 = toRefs(reactive(obj));
    return {
      temp0,
      temp,
      state0,
      state1,
      state2,
      add0,
      add1,
      add2,
      obj,
      A2,
      ...A3,
    };
  },
};
</script>
